<!--
	作者：839435033@qq.com
	时间：2018-08-02
	描述：试用vue做一个公共DNS的列表
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>TinyDNS</title>
		<link rel="shortcut icon" type="text/css" href="favicon.ico" />
		<link rel="apple-touch-icon" href="dns.png" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="vue.js"></script>
		<script type="text/javascript" src="data.js"></script>
		<script type="text/javascript" src="maopao.js">
		</script>
	</head>
	<style type="text/css">
		td,
		th {
			text-align: center;
		}
		
		#app {
			text-align: center;
		}
		
		.page-bar {
			margin: 40px;
		}
		
		ul,
		li {
			margin: 0px;
			padding: 0px;
		}
		
		li {
			list-style: none
		}
		
		.page-bar li:first-child>a {
			margin-left: 0px
		}
		
		.page-bar a {
			border: 1px solid #ddd;
			text-decoration: none;
			position: relative;
			float: left;
			padding: 6px 12px;
			margin-left: -1px;
			line-height: 1.42857143;
			color: #337ab7;
			cursor: pointer
		}
		
		.page-bar a:hover {
			background-color: #eee;
		}
		
		.page-bar a.banclick {
			cursor: not-allowed;
		}
		
		.page-bar .active a {
			color: #fff;
			cursor: default;
			background-color: #337ab7;
			border-color: #337ab7;
		}
		
		.page-bar i {
			font-style: normal;
			color: #d44950;
			margin: 0px 4px;
			font-size: 12px;
		}
		.page-bar li{
			display: inline-block;
		}
	</style>

	<body>
		<nav class="navbar navbar-inverse " role="navigation">
			<div class="container-fluid container">
				<div class="navbar-header">
					<a class="navbar-brand" href="#">TinyDNS</a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#">免费公共DNS</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<div id="app" class="container">
			<table class="table table-bordered ">
				<caption>------免费公共DNS服务器ip地址------</caption>
				<thead>
					<tr>
						<th class="col-xs-6 col-sm-3">DNS服务器名称</th>
						<th class="col-xs-6 col-sm-3">ip地址</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in dnslist">
						<td class="col-xs-6 col-sm-3">{{item.description}}</td>
						<td class="col-xs-6 col-sm-3">{{item.host}}</td>
					</tr>
				</tbody>
			</table>
			<div class="page-bar">
				<ul>
					<li v-if="cur>1">
						<a v-on:click="cur--,pageClick()">上一页</a>
					</li>
					<li v-if="cur==1">
						<a class="banclick">上一页</a>
					</li>
					<li v-for="index in indexs" v-bind:class="{ 'active': cur == index}">
						<a v-on:click="btnClick(index)">{{ index }}</a>
					</li>
					<li v-if="cur!=all">
						<a v-on:click="cur++,pageClick()">下一页</a>
					</li>
					<li v-if="cur == all">
						<a class="banclick">下一页</a>
					</li>
					<li>
						<a>共<i>{{all}}</i>页</a>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			var myobj = [];
			for(var key in test) {
				var obj = {};
				obj.description = key;
				obj.host = test[key];
				//console.log(test[key].indexOf(":") != -1 );
				if(test[key].indexOf(":") != -1) {
					obj.isipv4 = 'N';
				} else {
					obj.isipv4 = 'Y';
				}
				myobj.push(obj);
			}
			console.log(Math.ceil(myobj.length / 10));
			var dnslist = myobj.slice(0,10);
			new Vue({
				el: '#app',
				data: {
					dns: dnslist,
					all: Math.ceil(myobj.length / 10),//总页数
					cur: 1
				},
				watch: {
					cur: function(oldValue, newValue) {
//						console.log(arguments);
					}
				},
				methods: {
					btnClick: function(data) { //页码点击事件
						if(data != this.cur) {
							this.cur = data;
							console.log(this.cur);
							dnslist = myobj.slice((this.cur-1)*10,(this.cur-1)*10+10);
						}
					},
					pageClick: function() {
						console.log('现在在' + this.cur + '页');
						dnslist = myobj.slice((this.cur-1)*10,(this.cur-1)*10+10);
					}
				},
				computed: {
					indexs: function() {
						var left = 1;
						var right = this.all;
						var ar = [];
						if(this.all >= 5) {
							if(this.cur > 3 && this.cur < this.all - 2) {
								left = this.cur - 2
								right = this.cur + 2
							} else {
								if(this.cur <= 3) {
									left = 1
									right = 5
								} else {
									right = this.all
									left = this.all - 4
								}
							}
						}
						while(left <= right) {
							ar.push(left)
							left++
						}
						return ar
					}

				}
			});
		</script>
	</body>

</html>